<template>
  <div class="box">{{ 1 + 1 }} {{ a }} + {{ b }} = {{ c }}</div>
  <button @click="add">添加</button>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  computed: {
    c() {
      return this.a + this.b
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
    }
  },
  mounted() {
    console.log(`helloworld`)
    //0.62 = 1g
    //400g
    //10800 + 1080 = 11880
    //14400 - 2520 = 11880
    //
    //200000 * 0.2 - 16920 = 40000 - 16920
    //5000 * 0.03 = 150
    //1500 * 12 + 1000
    //
    //3000 * 12 * 0.2 =
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transform: translate(100px, 100px);
  animation: move 10s linear infinite forwards;
}
@keyframes move {
  0% {
    transform: translate(100px, 100px);
  }
  0% {
    transform: translate(100px, 100px) scale(1) translate(0, -50px) rotate(0deg) translate(0, 50px);
  }
  100% {
    transform: translate(100px, 100px) scale(2) translate(0, -50px) rotate(360deg) translate(0, 50px);
  }
}
</style>
